<template>
  <div>
    <hello-world title="你好世界"/>
    <button @click="changeMsg">修改msg</button>
    {{ msg }}
    <br>
    {{ reverseMsg }}
    <ul>
      <li v-for="item in arr" :key="item">
        {{ item }}
      </li>
    </ul>
    <button @click="changeDoubleNum">直接修改doubleNum</button>
    {{ doubleNum }}
  </div>
</template>

<script>
import { ref, watchEffect, watch, computed } from 'vue'
import HelloWorld from '@/components/HelloWorld'
export default {
  components: {
    HelloWorld
  },
  setup (props, context) {
    const msg = ref('这是初始值')
    const arr = ref([1, 2, 3, 4])
    /*
      会将 数据变成对象 { value: '值' }
      返回的是 代理对象
    */
    const changeMsg = (m) => {
      msg.value = '值改变了'
    }

    // 定义侦听器 watchEffect
    /*
      回调中使用了什么数据就回去侦听什么数据
    */
    /* watchEffect(() => {
      console.log(msg.value, 11111)
    }) */
    // watch侦听器
    watch(msg, (newVal, oldVal) => {
      console.log('数据改变了', newVal)
    })

    // 定义一个计算属性
    const reverseMsg = computed(() => msg.value.split('').reverse().join(''))
    // 直接修改 计算属性
    const num = ref(2)
    const doubleNum = computed({
      get: () => {
        return num.value * 2
      },
      set: (val) => {
        console.log('赋值了值是', val)
        num.value = val / 2
      }
    })
    const changeDoubleNum = () => {
      // 直接修改计算属性
      doubleNum.value = 100
    }
    return {
      // 将动态数据和动态方法暴露出去才能使用
      msg,
      changeMsg,
      arr,
      reverseMsg,
      num,
      doubleNum,
      changeDoubleNum
    }
  }
}

</script>

<style lang="scss" scoped>

</style>
